{% load static %}

{% include 'demo/base.html' %}


<div class="container-fluid">
    <!-- style="background-image: url('../../../static/images/img_girl.jpg');" -->
  <div class="row no-gutter">
    <div class="d-none d-md-flex col-md-4 col-lg-6 bg-image">
        <!-- <img src="../../../static/images/plane.jpg" alt="JT safaris logo" width="200%"> -->
    </div>
    <div class="col-md-8 col-lg-6">
      <div class="login d-flex align-items-center py-5">
        <div class="container">
          <div class="row">
            <div class="col-md-9 col-lg-8 mx-auto">
                {% if messages %}
                <ul class="messages">
                    {% for message in messages %}
                    <li class="text-danger">{% if message.tags %}{% endif %}{{ message }}</li>
                    {% endfor %}
                </ul>
                {% endif %}
              <h3 class="login-heading mb-4">Flight Booking</h3>
              <form method="POST" id="form_id"> {% csrf_token %}
                  <div class="form-label-group">
                      <input type="text" name="Origin" id="inputOrigin"
                             class="form-control" placeholder="From" required autofocus>
                      <label for="inputOrigin">From</label>
                  </div>

                  <div class="form-label-group">
                      <input type="text" name="Destination" id="inputDestination"
                             class="form-control" placeholder="To" required autofocus>
                      <label for="inputDestination">To</label>
                  </div>
                  <div class="form-label-group">
                      <input type="date" name="Departuredate" id="idDeparturedate"
                             class="form-control" placeholder="Departure Date" required>
                      <label for="idDeparturedate">Departure Date</label>
                  </div>

                  <div class="form-label-group">
                      <input type="date" name="Returndate" id="idReturndate"
                             class="form-control" placeholder="Return Date">
                      <label for="idReturndate">Return Date</label>
                  </div>
                  <input style="background-color: rgb(216, 212, 6); border-color: rgb(223, 187, 27);" class="btn btn-lg btn-primary btn-block btn-login text-uppercase font-weight-bold mb-2" type="Submit" name="Submit" value="Search Flight" />
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
    <script>
        $("#form_id").on("submit", function (e) {
        e.preventDefault(); //stop submit event
        var self = $(this);
        var originGiven = $("#inputOrigin").val();
        $("#inputOrigin").val(originGiven.slice(0,3));
        var destinationGiven = $("#inputDestination").val();
        $("#inputDestination").val(destinationGiven.slice(0,3));
        $("#form_id").off("submit");
        self.submit();
    });
    </script>